let username = document.querySelector("#username");
let email = document.querySelector("#email");
let password = document.querySelector("#password");
let password2 = document.querySelector("#password2");
let button = document.querySelector("button");

button.addEventListener("click", function(e) {
    // 需要阻止表单button中的submit
    // 默认行为
    e.preventDefault();
    console.log(username.value);
    // 需求分析：
    // 1.点击事件触发后，我需要判断的是ipt是否有内容
    if(username.value == ''){
        // 说明用户名没有填写
        // 2.如果没有，我就提示为必填项
            // 2.1让form-control的边框变红
            username.parentNode.classList.add('error');
        // 那么我要提示显示在small中
        // 通过innerHTML 去修改文本
        let small = username.parentNode.querySelector('small');
        small.innerHTML = "用户名为必填项";
    } else {
        // 说明username.value 已填
        // 接下来就要判断格式是否正确
        // 利用正则来判断
        let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/g;
        let res = reg.test(username.value);
        console.log(res);
        if (res) {
            // 如果正确，整个form-control的边框变绿
            username.parentNode.classList.add('success');
            username.parentNode.classList.remove('error');
        } else {
            username.parentNode.classList.add('error');
            let small = username.parentNode.querySelector('small');
            small.innerHTML = "用户名格式错误";
        }
    }
    
    // 3.如果有之后，我才去通过正则去判断数据的格式是否正确
})